import React, { Component } from 'react'
import './css/02-table-swich.css';
import Firm from './maizuocomponent/Firm'
import Cinema from './maizuocomponent/Cinema'
import Center from './maizuocomponent/Center'

export default class App extends Component {

  state = {
    list:[
      {
        id: 1,
        text: "电影" 
      },
      {
        id: 2, 
        text: "影院"
      },
      {
        id: 3,
        text: "我的"
      }
    ],
    current: 0
  }

  render() {
    return (
      <div>
        {
          this.state.current === 0 && <Firm></Firm>
        }
        {
          this.state.current === 1 && <Cinema></Cinema>
        }
        {
          this.state.current === 2 && <Center></Center>
        }
        
        <ul>
          {
            this.state.list.map(
              (item,index)=> <li key={item.id} className={this.state.current === index ? 'active' : ''} onClick= {() => {
                this.handleClick(index)
              }}>{item.text}</li>)
          }
        </ul>
      </div>
    )
  }

  handleClick = (index) =>{
    this.setState({
      current: index
    })
  }
}
